Summary 5

Back

Timothy J. Neeb

Prof. Blake Johnson

Understanding the Box Model

The Box Border

Border has three associated parts:

  • Width: This inlcudes - thin, medium, thick, or any unit (ems, px, %, and so on)
  • Style: This includes - none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset
  • Color: This inlcudes any color value (for example, RGB, hex, or keyword)

    • Box Padding

    Box padding is used between the box's content and the border of the box.The inside of the box takes on the color of the boxes background. if you display an elements border, you will almost always add padding to preven the content from touching it. Originally designers used table cell padding and spacer GIFs which added extra markup. Now you can simply add CSS padding styles.

    The Box Margins

    Margins are a bit more complex than borders and padding. Block level elements like paragraphs, headings, lists, and so on, have default margins. Often you will want to mix units when you set margins for text elements such as paragraphs. For example, the left and right margins of a paragraph might be set in pixels so thatr the text remains a fixed distance from a navigation sidebar, however it would be best to set the top and bottom margin in ems so that the vertical spacing between paragraphs is relative to teh sice of the paragraphs text